//一.守卫: 类似js里的if语句
//1.普通守卫函数
//定义守卫函数
// .common(@num) when(@num>100){
//     width: 100px;
//     height: 100px;
//     background-color: red;
// }
// //调用
// .box{
//     .common(150);
// }

// .common(@num) when(@num<=10){
//     width: 10px;height: 10px;
//     background-color:cyan;
// }
// //调用
// .box1{
//     .common(5);
// }


//
//2.链接守卫条件 通过and 链接多个条件 是且的关系
//可以通过,链接 是或的关系
.common(@num) when(@num<100),(@num>200){
    width: 50px;
    height: 50px;
    background-color: pink;
}
.box1 {
    .common(201)
}

.common(@num) when(@num>=100) and ( @num<= 150){
    width: 10px;
    height: 10px;

}
.box2 {
    .common(110);
    border:1px solid
}

//二.预定义函数

//if语句
@flag:true;
.box {
    //如果是true 执行前面  false 执行后面的
    width: if((@flag)100px,200px);
    height: 300px;
}

//转换类型
@flag:boolean(5<3);//false
.box {
    height: @flag;
    width: if((flag)100px,200px);
}

//数学函数的转换
@a:100px;
@b:30px;
.box{
    width: ceil((@a/@b));//向上取整
    height: floor((@a/@b));//向下取整
}



//三.less的模块化
//@import "路径"
@import "./08-less里的变量.less";


//四.字符串的拼接
//字符串里解析变量 也是通过 @{变量}
@url:"dog.png";
// images/dog.png
.box2{
    background-image:"./imgs/@{url}";
}
